<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">

	<script src="../lib/js/evm.js" type="text/javascript" charset="utf-8"></script>
	<script src="../lib/js/Evm_djyw.js" type="text/javascript" charset="utf-8"></script>
	<script src="../lib/js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../lib/js/key.js" type="text/javascript" charset="utf-8"></script>
	<script src="../lib/js/md5.js" type="text/javascript" charset="utf-8"></script>
	<script src="../lib/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="../css/play.css">
	<script src="../js/api.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
	<title>视频播放详情页</title>
</head>

<body bgcolor="transparent">
	<div id="pormpt" style="color: red;">
		<!--提示播放完毕-->
		<img src="../images/pormpt.png" />
	</div>
	<div id="imgs">
		<img class="logo" width="55px" height="55px" src="../images/pause.png" />
		<!--右下角的播放/暂停暂按钮-->
	</div>
	<div id="kuang">
		<div id="play">
			<img class="logo" width="30px" height="30px" src="../images/pause.png" />
			<!--进度条的播放/暂停按钮-->
		</div>
		<div id="nowtime">
			<!--当前时间-->
			<div class="time">0</div>
			<!--当前时-->
			<div>:</div>
			<div class="time">00</div>
			<!--当前分钟数-->
			<div>:</div>
			<div class="time">00</div>
			<!--当前秒-->
		</div>
		<div id="xiegang">
			&nbsp;/&nbsp;
		</div>
		<div id="contenttime">
			<div class="time">0</div>
			<!--总时长-->
			<div>:</div>
			<div class="time">00</div>
			<!--进制总分钟-->
			<div>:</div>
			<div class="time">00</div>
			<!--进制总秒钟-->
		</div>
		<div id="one">
			<!--总长度-->
			<div id="two">
				<!--当前长度-->
				<div id="yuan"></div>
				<!--进度头-->
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	// var hlock = 1;
	var video_sec;
	var flag = true; //用于判断是否执行统计
	var status = 1; //判断暂停/播放状态 1是正在播放，0是暂停播放
	var mediaStr; //获取播放地址
	// var mediaStr = TV.GetParam(''); //获取播放地址
	//var mediaStr = "http://10.2.11.145:8080/lovefrom.mp4";
	// getPlays();
	// function getPlays() {
	// 	$.ajax({
	// 		type: 'get',
	// 		url: 'http://157.0.134.235:7001/api/v2/article?id='+TV.GetParam('id'),
	// 		dataType: "jsonp", //			使用jsonp的方式传输数据(能够方便跨域)
	// 		jsonp: "callback",
	// 		async: false,
	// 		success: function (res) {
	// 			mediaStr = res.data.video_path_tv
	// 		},
	// 	})
	// }
	// var mediaStr; //获取播放地址
	// GetDatas('getArticle', {
	// 	id: TV.GetParam('')
	// }, function (err, res) {

	GetDatas('getArticle', {
		id: TV.GetParam()
	}, function (err, res) {

		mediaStr = res.data.video_path_tv
		init()
	})

	var mp = new MediaPlayer();
	var looptime; //延时句柄
	//fun start stop用于控制进度条显示隐藏
	function showImg() {
		$("#imgs").show();
		$("#kuang").show();
	}

	function fun() {
		$("#kuang").hide();
		$("#imgs").hide();
	}

	function start() {
		clearTimeout(looptime);
		looptime = setTimeout(fun, 7000);
	}

	function stop() {
		clearTimeout(looptime);
	}
	start(); //开始播放四秒后隐藏
	function grabEvent(e) {
		e = e || window.event;
		var keyCode = e.which || e.keyCode;
		switch (keyCode) {
			case 640:
			case 114:
			case keymap.iPanel.BACK:
			case keymap.DVN.BACK:
				clearInterval(loop); //释放循环资源
				exitPage();
				break;
			case 37: //left
				clearTimeout(looptime)
				flag = true;
				showImg();
				content -= 11; //快退进度
				mp.playByTime(1, content, 0); //具体调用进度方法
				start();
				break;
			case 39: //right
				clearTimeout(looptime)
				flag = true;
				showImg();
				content += 11; //定义进度数据小于15左右和快要结束再调用playByTime会有回退的情况
				if (content > video_sec) { //快进到党建时长超过总时长时，清空clearInterval并且退出
					mp.stop(0);
				} else { //若是没有超过
					mp.playByTime(1, content, 0);
					start();
				}
				break;
			case 13:
				if (status == 1) { //判断暂停/播放状态
					stop(); //清空延时，让下面进度条和按钮持续显示
					$('.logo').attr('src', '../images/play.png'); //更改播放按钮
					flag = false //暂停进度条轮询状态
					mp.pause(); //暂停
					status = 0;
					showImg();
				} else {
					$('.logo').attr('src', '../images/pause.png');
					mp.resume(); //继续播放
					flag = true;
					status = 1;
					start();
				}
				break;
		}
	}
	document.onkeydown = grabEvent;

	function init() { //视频播放的方法
	// console.log(mediaStr)
		mp.stop();
		var nativePlayerInstanceId = mp.getNativePlayerInstanceId();

		mp.setSingleMedia(mediaStr);
		mp.setVideoDisplayArea(0, 0, 1280, 720);
		mp.setVideoDisplayMode(0);
		mp.refreshVideoDisplay();
		mp.playFromStart();
	}

	function exitPage() {
		var send_time = mp.getCurrentPlayTime();
		// var data = {
		// 	id: TV.GetParam('id'),
		// 	duration: send_time,
		// 	cardNo: hardware.STB.serialNumber,
		// 	device: 'tv'
		// }

		// http(API_URL.baseURL + 'commons/postview', data, function (err, res) { });
		mp.stop();
		alert(mediaStr);
		window.history.go(-1);
	}
	setTimeout(function () {
		video_sec = mp.getMediaDuration(); //获取视频总秒数的方法
		var content = mp.getCurrentPlayTime(); //统计用的总秒数,获取视频当前秒数的方法
		videos = parseInt(video_sec) % 60; //播放视频的总秒数
		var videomin = (video_sec / 60) % 60; //播放视频的进制分钟数
		var videoh = ((video_sec / 60) / 60); //播放视频的进制秒数
		if (videos < 10) {
			videos = "0" + videos;
		}
		$(".time").eq(5).html(videos);
		if (videomin < 10) {
			if (videomin <= 1) {
				videomin = '00';
			} else {
				videomin = "0" + parseInt(videomin);
			}
		} else {
			videomin = parseInt(videomin)
		}
		$(".time").eq(4).html(videomin);
		$(".time").eq(3).html(parseInt(videoh));
	}, 4500)
	var onewidth = document.getElementById('one');
	widght = onewidth.offsetWidth; //获取总长进度条的长度


		var loop = setInterval(function () {
			if (flag) {
				content = mp.getCurrentPlayTime();
				s = parseInt(content); //用于转换的总秒数
				m = 0; //用于转换的总分钟数
				h = 0; //总小时数 
				min = 0;
				if (s >= 60) {
					m = parseInt(s / 60);
					min = m % 60;
				}
				sec = s % 60;
				if (m >= 60) {
					h = parseInt(m / 60);
				}
				var per = parseFloat((content / video_sec));
				var twowidth = document.getElementById('two');
				var setper = per.toFixed(4);
				var pers = widght * setper;
				twowidth.style.width = pers + "px" //动态变化进度条
				$(".time").eq(0).html(h);
				console.info($("#nowtime"))
				if (min < 10) {
					if (min < 1) {
						min = '00';
					} else {
						min = "0" + min;
					}
				}
				$(".time").eq(1).html(min);
				if (sec < 10) {
					sec = "0" + sec;
				}
				$(".time").eq(2).html(sec);
				var loopout = setTimeout(
					function setplayend() {
						if (s + 1 > video_sec) {
							//mp.playByTime(1, 0, 0);//设置播放结束回到起点重新播放
							showImg();
							$("#pormpt").show();
							setTimeout(function () {
								window.history.go(-1);
							}, 5000)
						} else {
							clearTimeout(loopout)
						}
					}, 2000)
			}
		}, 1000);
	



	$(window).unload(function () {
		mp.stop();
	});
</script>

</html>